<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import UploadImg from "@/components/UploadImg/index.vue";
import { usePublicHooks } from "@/views/hooks";
const { switchStyle, peripheryTypeMap } = usePublicHooks();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    poiType: "",
    longitude: null,
    latitude: null,
    address: "",
    introduction: "",
    coverImageUrl: null,
    recommendationScore: 1
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
function handleChangePhoto(file, key) {
  console.log("handleChangePhoto:", file);
  newFormInline.value[key] = file;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-position="left"
    label-width="50px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="newFormInline.address"
            clearable
            placeholder="请输入地址"
          /> </el-form-item
      ></re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="经度" prop="longitude">
          <el-input
            v-model="newFormInline.longitude"
            clearable
            placeholder="请输入经度"
          /> </el-form-item
      ></re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="维度" prop="latitude">
          <el-input
            v-model="newFormInline.latitude"
            clearable
            placeholder="请输入维度"
          /> </el-form-item
      ></re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="类型 ">
          <el-select
            v-model="newFormInline.poiType"
            placeholder="请选择类型 "
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in peripheryTypeMap"
              :key="index"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="排序">
          <el-input-number
            v-model="newFormInline.recommendationScore"
            :min="1"
            :max="9999"
            style="width: 100%"
            controls-position="right"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="封面图" label-position="top">
          <div class="flex flex-col">
            <UploadImg
              v-model:model-value="newFormInline.coverImageUrl"
              :width="680"
              @change="handleChangePhoto($event, 'coverImageUrl')"
            />
            <div class="flex">
              <div class="text-[12px]">
                (只能上传jpg/png文件，且不超过500kb)
              </div>
            </div>
          </div>
        </el-form-item>
      </re-col>
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="有效状态" prop="EnabledMark">
          <el-select
            v-model="newFormInline.EnabledMark"
            placeholder="请选择状态"
          >
            <el-option label="允许" :value="0" />
            <el-option label="禁止" :value="1" />
          </el-select> </el-form-item
      ></re-col> -->
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="是否推荐" prop="EnabledMark">
          <el-switch
            v-model="newFormInline.recommend"
            active-value="1"
            inactive-value="0"
            active-text="推荐"
            inactive-text="不推荐"
            inline-prompt
            :style="switchStyle"
        /></el-form-item>
      </re-col> -->
      <!-- <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注">
          <el-input
            v-model="newFormInline.Description"
            placeholder="请输入备注信息"
            type="textarea"
          /> </el-form-item
      ></re-col> -->
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="简介" prop="introduction" label-position="top">
          <el-input
            v-model="newFormInline.introduction"
            clearable
            type="textarea"
            :rows="6"
            placeholder="请输入简介"
          /> </el-form-item
      ></re-col>
    </el-row>
  </el-form>
</template>
